﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>按档口汇总</title>
    <link rel="stylesheet" href="../Script/common/vant.min.css" />
    <script src="../Script/common/vue.js"></script>
    <script src="../Script/common/vant.min.js"></script>
    <script src="../Script/common/axios.min.js"></script>
    <script src="../Script/common/Session.js"></script>
    <script src="../Script/common/Tools.js"></script>
    <script src="../Script/common/Validate.js"></script>
    <script src="../Script/common/Page.js"></script>
    <script src="../Script/common/Http.js"></script>
    <script type="text/javascript" src="../Script/common/moment.js"></script>
    <meta name="author" content="" />
    <link rel="stylesheet" href="../Script/common/diygw-ui/index.css" />
    <style>
        .tabs-clz {
            border-bottom-left-radius: 1px;
            overflow: hidden;
            flex: 1;
            border-top-left-radius: 1px;
            border-top-right-radius: 1px;
            border-bottom-right-radius: 1px;
        }

        .tabs-title {
            background-color: #05051b !important;
        }

        .flex7-clz {
            border: 1px solid #eee;
        }

        .button-button-clz {
            margin: 3px !important;
        }

        .flex5-clz {
            background-image: linear-gradient(45deg, #fa8bff 0%, #2bd2ff 52%, #2bff88 90%);
          /*  height: 500px;*/
        }

        .flex-clz {
            padding-top: 5px;
            border-bottom-left-radius: 6px;
            z-index: 1000;
            padding-left: 5px;
            padding-bottom: 5px;
            border-top-right-radius: 6px;
            margin-right: 5px;
            background-color: #ffffff;
            margin-left: 5px;
            box-shadow: 0px 1px 3px rgba(31, 31, 31, 0.16);
            overflow: hidden;
            width: calc(100% - 5px - 5px) !important;
            border-top-left-radius: 6px;
            margin-top: 5px;
            border-bottom-right-radius: 6px;
            margin-bottom: 5px;
            padding-right: 5px;
        }

        .flex1-clz {
            z-index: 1000;
            border-right: 1px solid #eee;
        }

        .flex2-clz {
            z-index: 1000;
            border-right: 1px solid #eee;
        }

        .flex3-clz {
            z-index: 1000;
        }

        .grid-clz {
            font-size: 18px !important;
        }

        .grid-item-clz {
            font-size: 18px;
            margin: 0px;
            padding: 10px;
            background-color: #fbfbfb;
        }

        .grid-icon-clz {
            width: 50px;
            height: 50px;
            font-size: calc(50px - 4px) !important;
        }

        .container {
            padding-left: 0px;
            padding-right: 0px;
            font-size: 12px;
        }

        .container {
            padding-top: 45px;
            padding-bottom: 80px;
        }
    </style>
    <script src="../Script/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $.post("../Ajax/InvalidSession.ashx", {}, function (res) {
                if (res.data == "0") {
                    window.location.href = "../Binding.aspx";
                }
            })
            setTimeout(function () {

                var cantname = $("#van-field-1-input").val()
                var date1 = $("#cantime").val();

                dataInfo(cantname, date1);

                $("#scroll-0").click(function () {
                    cantname = $("#van-field-1-input").val();
                    date1 = $("#cantime").val();
                    dataInfo(cantname, date1);
                });
                $("#scroll-1").click(function () {
                    cantname = $("#van-field-1-input").val();
                    date1 = $("#cantime").val();
                    dataInfo(cantname, date1);
                });
                $("#scroll-2").click(function () {
                    cantname = $("#van-field-1-input").val();
                    date1 = $("#cantime").val();
                    dataInfo(cantname, date1);
                });
                $("#scroll-3").click(function () {
                    cantname = $("#van-field-1-input").val();
                    date1 = $("#cantime").val();
                    dataInfo(cantname, date1);
                });
                $("#scroll-4").click(function () {
                    cantname = $("#van-field-1-input").val();
                    date1 = $("#cantime").val();
                    dataInfo(cantname, date1);
                });
                $("#scroll-5").click(function () {
                    cantname = $("#van-field-1-input").val();
                    date1 = $("#cantime").val();
                    dataInfo(cantname, date1);
                });


                $("#checkquery").click(function () {
                    cantname = $("#van-field-1-input").val();
                    date1 = $("#cantime").val();
                    dataInfo(cantname, date1);
                })

                $("#btnquery").click(function () {
                    cantname = $("#van-field-1-input").val();
                    date1 = $("#cantime").val();
                    dataInfo(cantname, date1);
                })

            }, 1000)


            function dataInfo(cantname, date1) {
                $.post("../Ajax/MerchantManagement.ashx", { merType: "initdangkoudata", cantname: cantname, date1: date1 }, function (res) {
                    //if (res == "-1") { window.location.href = "../Binding.aspx"; }

                    if (res != "") {
                        res = JSON.parse(res);
                        //食堂汇总消费金额
                        var cantsum = JSON.parse(res.cantsum)[0];
                        $("#cantsum").html(cantsum.xfze);
                        $("#cantcount").html(cantsum.xfzc);


                        var cantdata = JSON.parse(res.cantdata);
                        var cantdatastr = '';
                        for (var i = 0; i < cantdata.length; i++) {
                            cantdatastr += '<div class="diygw-grid-item"><div class="diygw-grid-inner grid-item-clz" ><div class="diygw-grid-title">'
                                                + cantdata[i].dangkou + '</div></div ></div ><div class="diygw-grid-item"><div class="diygw-grid-inner grid-item-clz"><div class="diygw-grid-title">'
                                                + cantdata[i].xfze + ' 元</div></div></div><div class="diygw-grid-item"><div class="diygw-grid-inner grid-item-clz"><div class="diygw-grid-title">'
                                                + cantdata[i].xfzc + ' 次</div></div></div>';
                        }
                        $("#cantdata").empty();
                        $("#cantdata").append(cantdatastr);

                    }


                });
            }

        });
    </script>
</head>
<body>
    <div id="app">
        <div class="container">
            <div class="flex diygw-col-24 diygw-bottom">
                <div class="diygw-grid diygw-actions">
                    <button  @click="navigateTo" data-type="href" data-url="index.html" class="diygw-action">
                        <div class="diygw-grid-inner solid-right">
                            <div class="diygw-grid-icon diygw-avatar">
                                <img mode="aspectFit" class="diygw-avatar-img" src="../Script/static/icon8_sy.png" />
                            </div>
                            <div class="diygw-grid-title">主页汇总</div>
                        </div>
                    </button>
                    <button @click="navigateTo" data-type="href" data-url="canteen.html" class="diygw-action">
                        <div class="diygw-grid-inner solid-right">
                            <div class="diygw-grid-icon diygw-avatar">
                                <img mode="aspectFit" class="diygw-avatar-img" src="../Script/static/icon8_dp.png" />
                            </div>
                            <div class="diygw-grid-title">食堂汇总</div>
                        </div>
                    </button>
                    <button class="diygw-action addon" @click="navigateTo" data-type="href" data-url="dangkou.html" >
                        <div class="diygw-grid-inner solid-right">
                            <div class="diygw-grid-icon diygw-avatar">
                                <img mode="aspectFit" class="diygw-avatar-img" src="../Script/static/icon11_jglb.png" />
                            </div>
                            <div class="diygw-grid-title">档口汇总</div>
                        </div>
                    </button>
                    <!--<button class="diygw-action">
                        <div class="diygw-grid-inner solid-right">
                            <div class="diygw-grid-icon diygw-avatar">
                                <img mode="aspectFit" class="diygw-avatar-img" src="../Script/static/icon11_mhgl.png" />
                            </div>
                            <div class="diygw-grid-title">机号汇总</div>
                        </div>
                    </button>
                    <button class="diygw-action">
                        <div class="diygw-grid-inner solid-right">
                            <div class="diygw-grid-icon diygw-avatar">
                                <img mode="aspectFit" class="diygw-avatar-img" src="../Script/static/icon9_bmgk.png" />
                            </div>
                            <div class="diygw-grid-title">部门汇总</div>
                        </div>
                    </button>-->
                </div>
            </div>
            <div class="flex diygw-col-24 flex-direction-column tabs-clz">
                <scroll-view scroll-x :scroll-into-view="'scroll-' + tabsIndex" :scroll-left="tabsLeft" scroll-with-animation class="diygw-tabs text-center justify-start blue small-border tabs-title">
                    <div :id="'scroll-' + index" class="diygw-tab-item" :class="index==tabsIndex?' cur':''" v-for="(item,index) in  tabsDatas" :key="index" @click="changeTabs" :data-index="index"><span v-if="item.icon" :class="item.icon"></span> {{item.text}}</div>
                </scroll-view>
            </div>
            <div class="diygw-title diygw-top gradual-blue">
                <i onclick="history.back(-1)" class="title-bar-icon diy-icon-back"></i> <span class="back-text" onclick="history.back(-1)">返回</span> <i onclick="location.href='index.html'" class="title-bar-icon diy-icon-home margin-left"></i>
                <div class="title flex1 text-center textindent50">档口汇总</div>
            </div>
            <div class="flex diygw-col-24">
                <div class="diygw-pzx" style="border-bottom: 1px solid #eee"></div>
            </div>
            <div class="flex flex-wrap diygw-col-24 justify-between items-center flex4-clz">
                <div class="flex flex-wrap diygw-col-20 flex-direction-column items-center flex6-clz">
                    <div class="diygw-form-item diygw-col-24">
                        <div class="title">档口</div>
                        <div class="flex input" @click.stop="showSct=true"><van-field class="flex1" name="sctLabel" readonly placeholder="请选择" v-model="sctLabel" /> <i class="iconfont icon-right"></i></div>
                        <van-popup  v-model:show="showSct" teleport="body" position="bottom">
                            <van-picker :columns="sctDatas" @confirm="changeSct" @cancel="showSct=false" />
                        </van-popup>
                        <van-field class="hidden" type="hidden" name="sct" v-model="sct" />
                    </div>
                </div>
                <div class="flex flex-wrap diygw-col-4 flex-direction-column items-center flex7-clz">
                    <div class="flex diygw-col-24">
                        <button id="btnquery" class="diygw-btn black radius-xs margin-xs button-button-clz">查询</button>
                    </div>
                </div>
            </div>
            <div class="flex flex-wrap diygw-col-24 flex-direction-column bg-none flex5-clz">
                <div class="flex flex-wrap diygw-col-24 justify-between items-center flex-clz">
                    <div class="flex flex-wrap diygw-col-8 flex-direction-column items-center flex1-clz">
                        <div class="diygw-col-0 diygw-text-lg text-green"></div>
                        <div class="diygw-col-0 diygw-text-lg text-yellow">档口营业</div>
                    </div>
                    <div class="flex flex-wrap diygw-col-8 flex-direction-column items-center flex2-clz">
                        <div id="cantsum" class="diygw-col-0 diygw-text-lg text-yellow"></div>
                        <div class="diygw-col-0 diygw-text-md text-yellow">消费总额</div>
                    </div>
                    <div class="flex flex-wrap diygw-col-8 flex-direction-column items-center flex3-clz">
                        <div id="cantcount" class="diygw-col-0 diygw-text-lg text-yellow"></div>
                        <div class="diygw-col-0 diygw-text-md text-yellow">消费次数</div>
                    </div>
                </div>
                <div class="flex flex-wrap diygw-col-24 flex-direction-column flex8-clz">
                    <div id="cantdata" v-for="(item,index) in modules" :key="index" class="diygw-grid col-3">



                    </div>
                    <input style="display:none;" id="cantime" v-model="date1" type="text" value="" />
                </div>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>

    <script type="module">
    const app = Vue.createApp({
            data() {
                return {
                    tabsDatas: [
                        { text: `今天`, icon: `` },
                        { text: `昨天`, icon: `` },
                        { text: `本周`, icon: `` },
                        { text: `上周`, icon: `` },
                        { text: `本月`, icon: `` },
                        { text: `上月`, icon: `` }
                    ],
                    modules: [{}],
                    cantsum: 0,
                    cantcount: 0,
                    tabsLeft: 0,
                    tabsIndex: 0,
                    showSct: false,
                    sctDatas: [],
                    sctValues: [],
                    sct: '',
                    sctLabel: '',
                    date1: '',//日期

                };
            },
            created() {
                this.init();
            },
            methods: {
                async init() {
                    //监测登录会话
                    axios({ method: "post", url: "../Ajax/InvalidSession.ashx" }).then((res) => {
                        if (res.data == "0") {
                            window.location.href = "../Binding.aspx";
                        }
                    })
                    //今天默认日期
                    this.date1 = moment(moment().startOf("day").valueOf()).format("YYYY-MM-DD") + "至" + moment(moment().valueOf()).format("YYYY-MM-DD");

                    //初始化档口下拉加载
                    axios({ method: "post", url: "../Ajax/MerchantManagement.ashx", params: { merType: "infodangkou" } }).then((res) => {
                        let candata = res.data.split(',');
                        this.sctDatas = candata;
                        this.sctValues = candata;
                    });






                },
                changeTabs(evt) {
                    let { index } = evt.currentTarget.dataset;
                    if (index == this.tabsIndex) return;
                    this.setData({
                        tabsLeft: (index - 1) * 60,
                        tabsIndex: index
                    });
                    //今天
                    if (this.tabsIndex == 0) {
                        this.date1 = moment(moment().startOf("day").valueOf()).format("YYYY-MM-DD") + "至" + moment(moment().valueOf()).format("YYYY-MM-DD");
                    }
                    //昨天
                    if (this.tabsIndex == 1) {
                        this.date1 = moment(moment().add(-1, 'days').startOf("day").valueOf()).format("YYYY-MM-DD") + "至" + moment(moment().add(-1, 'days').endOf('day').valueOf()).format('YYYY-MM-DD');
                    }
                    //本周
                    if (this.tabsIndex == 2) {
                        this.date1 = moment(moment().week(moment().week()).startOf('week').add(1, 'days').valueOf()).format('YYYY-MM-DD') + "至" + moment(moment().week(moment().week()).endOf('week').add(1, 'days').valueOf()).format('YYYY-MM-DD');
                    }
                    //上周
                    if (this.tabsIndex == 3) {
                        this.date1 = moment(moment().week(moment().week() - 1).startOf('week').add(1, 'days').valueOf()).format('YYYY-MM-DD') + "至" + moment(moment().week(moment().week() - 1).endOf('week').add(1, 'days').valueOf()).format('YYYY-MM-DD');
                    }
                    //本月
                    if (this.tabsIndex == 4) {
                        this.date1 = moment(moment().month(moment().month()).startOf('month').valueOf()).format('YYYY-MM-DD') + "至" + moment(moment().month(moment().month()).endOf('month').valueOf()).format('YYYY-MM-DD');
                    }
                    //上月
                    if (this.tabsIndex == 5) {
                        this.date1 = moment(moment().month(moment().month() - 1).startOf('month').valueOf()).format('YYYY-MM-DD') + "至" + moment(moment().month(moment().month() - 1).endOf('month').valueOf()).format('YYYY-MM-DD');
                    }

                },
                changeSct(value, index) {
                    this.sctLabel = value;
                    this.sct = this.sctValues[index];
                    this.showSct = false;
                }
            }
        });
        app.use(vant);
        app.config.globalProperties.$tools = new Tools();
        app.config.globalProperties.$http = httpService;
        app.config.globalProperties.$session = Session;
        app.mixin({
            methods: {
                Validate,
                setData,
                navigateTo,
                showModal,
                showToast,
                uploadImage
            }
        });
        app.mount('#app');</script>

</body>


</html>
